<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="/lib/echarts.min.js"></script>
</head>
<body>
  <div id="main" style="width:50%;height:500px"></div>
  <script>
    // 网格: grid
    const mcharts = echarts.init(document.getElementById('main'))
    const option = {
      dataZoom: [
        {
          type: 'inside' ,  //slider 滑块   inside 鼠标滚动或双指缩放
          xAxisIndex: 0  // 指明哪个轴
        },
        {
          type: 'slider', //
          yAxisIndex: 0,
          start: 0,
          end: 30
        }
      ],
      title: {
        text: 'echarts入门实例',
        link: 'https://www.baidu.com',
        textStyle: {
          color: '#ff3040',
          fontStyle: 'italic'
        }
      },
      toolbox: {
        feature: {
          dataZoom: {} //区域缩放
        }
      },
      grid: {
        show: true,
        borderWidth: 3,
        borderColor: 'red',
        // left: 120, //位置
        // top: 120, //位置
        // width: 600, //大小
        // height: 300 //大小
      },
      tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          type:'category', //类目轴
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
          position: 'top'
        },
        yAxis: {
          type: 'value' //数值轴
        },
        series: [
          {
            name: '销量',
            type: 'bar', //决定图表类型
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
    }
    mcharts.setOption(option)
  </script>
</body>
</html>